<!-- 主页面左侧 -->
<template>
  <div id="mainleft">
    <el-menu default-active="2" class="el-menu-vertical-demo">
      <template v-for="treeoneobj in treelistarr">
        <el-submenu :index="String(treeoneobj.id)" :key="treeoneobj.id">
          <template slot="title">
            <i :class="treeoneobj.icon" style="color: #409EFF;"></i>
            <span>{{treeoneobj.title}}</span>
          </template>
          <el-submenu v-for="twomenuobj in treeoneobj.twomenu" :index="String(twomenuobj.id)" :key="twomenuobj.id">
            <template slot="title">
              <i :class="twomenuobj.icon" style="color: skyblue;"></i>
              {{twomenuobj.title}}
            </template>
            <el-menu-item v-for="threemenuobj in twomenuobj.threemenu" :index="String(threemenuobj.id)" :key="threemenuobj.id">
              <i :class="threemenuobj.icon" style="color: skyblue;"></i>
              <router-link :to="threemenuobj.href" style="text-decoration: none; color: #303133;">
                {{threemenuobj.title}}
              </router-link>
            </el-menu-item>
          </el-submenu>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
	export default {
		name: "mainleft",
		data() {
			return {
				treelistarr: [{
					"id": 1,
					"title": "系统设置",
					"icon": "el-icon-location",
					"twomenu": [{
						"id": "21",
						"title": "我的工作平台",
						"icon": "el-icon-folder",
						"threemenu": [{
							"id": "22",
							"title": "待办列表",
							"icon": "el-icon-folder-opened",
							"href": "/backlogVue"
						}, {
							"id": "23",
							"title": "个人资料修改",
							"icon": "el-icon-folder-opened",
							"href": "/yonghuVue"
						}]
					}, {
						"id": "31",
						"title": "系统管理",
						"icon": "el-icon-folder",
						"threemenu": [{
							"id": "32",
							"title": "角色管理",
							"icon": "el-icon-folder-opened",
							"href": "/psroleVue"
						}, {
							"id": "33",
							"title": "用户管理",
							"icon": "el-icon-folder-opened",
							"href": "/psuserVue"
						}, {
							"id": "34",
							"title": "角色权限配置",
							"icon": "el-icon-folder-opened",
							"href": "/premissionVue"
						}, {
							"id": "35",
							"title": "系统配置",
							"icon": "el-icon-folder-opened",
							"href": "/ConfigurationVue"
						}]
					}, {
						"id": "41",
						"title": "杆塔管理",
						"icon": "el-icon-folder",
						"threemenu": [{
							"id": "42",
							"title": "杆塔管理",
							"icon": "el-icon-folder-opened",
							"href": "/Line"
						}]
					}, {
						"id": "51",
						"title": "线路管理",
						"icon": "el-icon-folder",
						"threemenu": [{
							"id": "52",
							"title": "线路管理",
							"icon": "el-icon-folder-opened",
							"href": "/Pole"
						}]
					}, {
						"id": "61",
						"title": "缺陷管理",
						"icon": "el-icon-folder",
						"threemenu": [{
							"id": "62",
							"title": "缺陷类型设置",
							"icon": "el-icon-folder-opened",
							"href": "/defectTypeVue"
						}, {
							"id": "63",
							"title": "缺陷等级确认",
							"icon": "el-icon-folder-opened",
							"href": "/gradeVue"
						}]
					}, {
						"id": "71",
						"title": "巡检任务管理",
						"icon": "el-icon-folder",
						"threemenu": [{
							"id": "72",
							"title": "巡检任务制定与分配",
							"icon": "el-icon-folder-opened",
							"href": "/PsInspectiontaskMainVue"
						}, {
							"id": "73",
							"title": "巡检任务执行与回执",
							"icon": "el-icon-folder-opened",
							"href": "/PriceSheetVue"
						}, {
							"id": "74",
							"title": "缺陷查询",
							"icon": "el-icon-folder-opened",
							"href": "/PriceSheetVue"
						}]
					}, {
						"id": "81",
						"title": "消缺任务管理",
						"icon": "el-icon-folder",
						"threemenu": [{
							"id": "82",
							"title": "消缺任务制定与分配",
							"icon": "el-icon-folder-opened",
							"href": "/RolepermismangeVue"
						}, {
							"id": "83",
							"title": "消缺任务执行与回执",
							"icon": "el-icon-folder-opened",
							"href": "/PriceSheetVue"
						}, {
							"id": "84",
							"title": "消缺查询",
							"icon": "el-icon-folder-opened",
							"href": "/PriceSheetVue"
						}]
					}, {
						"id": "91",
						"title": "信息统计",
						"icon": "el-icon-folder",
						"threemenu": [{
							"id": "92",
							"title": "巡检记录统计",
							"icon": "el-icon-folder-opened",
							"href": "/messageVue"
						}, {
							"id": "93",
							"title": "消缺记录统计",
							"icon": "el-icon-folder-opened",
							"href": "/messageVue"
						}]
					}]
				}]
			}
		}
	}
</script>

<style>
	.el-submenu {
		text-align: left;
	}
</style>